<template>
  <div>
    <el-header style="height: auto;">
      <div class="header-picker">
        <el-select style="width:120px" size="mini" v-model="scYear.value" placeholder="学年">
          <el-option
            v-for="item in scYear.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select style="width:80px" size="mini" v-model="semester.value" placeholder="学期">
          <el-option
            v-for="item in semester.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          style="width:130px"
          size="mini"
          v-model="scheduleStatus.value"
          placeholder="课程性质"
        >
          <el-option
            v-for="item in scheduleStatus.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="btn-box">
        <el-button
          type="primary"
          @click="getXqGrade"
          plain
          size="small"
          :loading="btnLoading.sMl"
        >学期成绩</el-button>
        <el-button
          type="primary"
          @click="getXnGrade"
          plain
          size="small"
          :loading="btnLoading.sYl"
        >学年成绩</el-button>
        <el-button
          type="primary"
          @click="getHistoryGrade"
          plain
          size="small"
          :loading="btnLoading.lYl"
        >历年成绩</el-button>
        <el-button
          type="primary"
          @click="getGradeCount"
          plain
          size="small"
          :loading="btnLoading.aTl"
        >成绩统计</el-button>
      </div>
    </el-header>
    <el-main style="padding:0">
      <div class="info-box" style>
        <h2 class="info-title">在学校成绩</h2>
        <table class="info-table">
          <tr class="tr">
            <td class="td">
              <span>学号：</span>
              <span v-text="userInfo.nid">1621911403</span>
            </td>
            <td class="td">
              <span>姓名:</span>
              <span v-text="userInfo.name">王加晓</span>
            </td>
            <td class="td">
              <span>学院：</span>
              <span v-text="userInfo.xy">数学与信息工程学院</span>
            </td>
          </tr>
          <tr class="tr">
            <td class="td">
              <span>专业：</span>
              <span v-text="userInfo.specialty">计算机科学与技术</span>
            </td>
            <td class="td">
              <span>行政班：</span>
              <span v-text="userInfo.class">16计算机科学与技术四</span>
            </td>
          </tr>
        </table>
      </div>
      <el-table
        v-show="!isCountGrade"
        stripe
        :data="tableData"
        style="width: 100%;box-sizing:border-box;padding:30px"
      >
        <el-table-column prop="course.year" label="学年"></el-table-column>
        <el-table-column prop="course.xq" label="学期"></el-table-column>
        <el-table-column prop="course.nid" label="课程代码"></el-table-column>
        <el-table-column prop="course.coursename" label="课程名称"></el-table-column>
        <el-table-column prop="course.coursenature" label="课程性质"></el-table-column>
        <!-- <el-table-column prop="coursename" label="课程归属"></el-table-column> -->
        <el-table-column prop="xf" label="学分"></el-table-column>
        <el-table-column prop="gpa" label="绩点"></el-table-column>
        <el-table-column prop="grade" label="成绩"></el-table-column>
        <!-- <el-table-column prop="coursename" label="开课学院"></el-table-column> -->
      </el-table>
      <div v-show="isCountGrade">
        <ul class="count-box">
          <li class="flex-center">
            <p>
              所选学分
              <span v-text="countTopAndFootInfo.choseXf"></span>;
            </p>
            <p>
              获得学分
              <span v-text="countTopAndFootInfo.getXf"></span>
            </p>
          </li>
          <el-table
            stripe
            :data="countTable"
            style="width: 100%;box-sizing:border-box;padding:30px"
          >
            <el-table-column prop="coursenatrue" label="课程性质"></el-table-column>
            <el-table-column prop="xfNeed" label="学分要求"></el-table-column>
            <el-table-column prop="getXf" label="获得学分"></el-table-column>
            <el-table-column prop="needXf" label="还需学分"></el-table-column>
          </el-table>
          <li class="flex-center">
            <p>
              所有课程平均学分绩点:
              <span v-text="countTopAndFootInfo.averageGpa"></span>;
            </p>
            <p>
              学分绩点总和:
              <span v-text="countTopAndFootInfo.xfJdCount"></span>
            </p>
          </li>
        </ul>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCountGrade: false,
      btnLoading: {
        sMl: false, //学期成绩
        sYl: false, //学年成绩
        lYl: false, //历年成绩
        nPl: false, //未通过成绩
        aTl: false, //成绩统计
        aFl: false //所有辅修成绩
      },
      countTable: [],
      tableData: [],
      scYear: {
        value: "",
        list: []
      },
      semester: {
        value: "",
        list: [
          {
            value: "1",
            label: "1"
          },
          {
            value: "2",
            label: "2"
          }
        ]
      },
      scheduleStatus: {
        value: "",
        list: [
          {
            value: "必修课",
            label: "必修"
          },
          {
            value: "选修课",
            label: "选修"
          },
          {
            value: "辅修课",
            label: "辅修"
          },
          {
            value: "",
            label: ""
          }
        ]
      },
      userInfo: {},
      searchParama: {},
      countTopAndFootInfo: {}
    };
  },
  methods: {
    async getXqGrade() {
      if (!this.scYear.value) {
        this.$message.error("请选择学年！");
        return;
      }
      if (!this.semester.value) {
        this.$message.error("请选择学期！");
        return;
      }
      this.isCountGrade = false;
      let res = await this.$http.get(
        `studentPageAPI/getXqGrade?xn=${this.scYear.value}&coursenature=${this.scheduleStatus.value}&xq=${this.semester.value}`
      );
      this.tableData = res.data;
    },
    async getXnGrade() {
      if (!this.scYear.value) {
        this.$message.error("请选择学年！");
        return;
      }
      let res = await this.$http.get(
        `studentPageAPI/getXnGrade?xn=${this.scYear.value}&coursenature=${this.scheduleStatus.value}`
      );
      this.isCountGrade = false;
      this.tableData = res.data;
      // console.log(res);
    },
    async getHistoryGrade() {
      let res = await this.$http.get(
        `studentPageAPI/getHistoryGrade?coursenature=${this.scheduleStatus.value}`
      );
      this.isCountGrade = false;
      this.tableData = res.data;
    },
    async getGradeCount() {
      this.isCountGrade = true;
      let res = await this.$http.get("studentPageAPI/getCountGradeTopAndFoot");
      let countListRes = await this.$http.get(
        "studentPageAPI/getCountGradeList"
      );
      this.countTable = countListRes.data;
      this.countTopAndFootInfo = res.data;
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row.grade);
      if (row.grade < 60 || row.grade == "不合格") {
        return "warning-row";
      }
      if (row.grade >= 90 || row.grade == "优秀") {
        return "success-row";
      }
    },
    async getGradeList() {},
    async getUserInfo() {
      let res = await this.$http.get("studentPageAPI/info");
      this.userInfo = {
        name: res.data.name,
        nid: res.data.nid,
        xy: res.data.specialty.superior.superior.name,
        specialty: res.data.specialty.name,
        class: res.data.class.name
      };
    },
    async getNowDate() {
      let res = await this.$http.get("teacherPageAPI/nowXnAndXq");
      console.log(res.data);
      let yearSplitList = res.data.xn.split("-");
      for (let i = 0; i < 4; i++) {
        let xn = yearSplitList[0] - i + "-" + (yearSplitList[1] - i);
        this.scYear.list.push({
          label: xn,
          value: xn
        });
      }
      this.semester.list = [
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        }
      ];
    }
  },
  created() {
    this.getUserInfo();
    this.getNowDate();
  }
};
</script>

<style scoped lang="stylus">
.count-box {
  border: 1px solid #EDF0F5;
  border-radius: 5px;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.el-header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #f2f6fc;
  color: black;
  padding-bottom: 10px;
}

.info-box {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #EDF0F5;
  margin-top: 10px;

  .info-title {
    text-align: center;
    color: gray;
    margin-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0;
    border-bottom: 1px solid #EDF0F5;
  }

  .info-table {
    font-size: 15px;
    color: gray;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    padding-top: 0;

    .tr {
      width: 100%;
      box-sizing: border-box;
    }

    .td {
      padding: 4px;
      border-bottom: 1px solid #EDF0F5;
    }

    .td:hover {
      background: #F5F7FA;
    }
  }
}
</style>